<template>
  <div id="consult">
    <my-header></my-header>
    <div class="main">
     
      <h1>客服咨询<van-icon name="service-o" /></h1>
      <hr />
      <div class="centert" id="chart-list">
          <div class="chart-item">
          <img src="/88.jpg"  style="width: 50px;">
            <div style=" position: relative; margin:10px 0 10px 0">
              <!-- <span class="jt" ></span> -->
              <span class="dialog " >
                    <van-button type="primary" to="complaint" size="mini" color="#FFBDCF" plain>投诉</van-button>
                </span>
            </div>         
          </div>
      </div>
      <div class="chart-form">
        <div>
          <textarea
            class="chart-form-message"
            id="message"
            placeholder="亲,有什么问题请输入"
          >
          </textarea>
        </div>
        <div style="position: relative">
          <input type="button" id="send" class="chart-form-send" value="发表" />
         
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue";
export default {
  components: { MyHeader },
  name: "scroll",
  data() {
    return {
      button:false
    };
  },
  mounted() {
    this.getservice();
  },
  methods: {
    //聊天
    getservice() {
      var io = require("../../../scripts/socket.io.js");
      //创建websocket连接
      //  io.socket = io('ws://xxxx.xxxx.xxxx.xxxx:4000')
       var socket = io('http://127.0.0.1:3001')
      // var socket = io("http://82.157.19.46:3001");
      console.log("连接成功", socket);
      //接收服务端发回来的消息
      let count = -1;
      console.log(count);
      var list = document.getElementById("chart-list");
      socket.on("textmsg", function (data) {
        console.log("服务端返回:" + data);
        count++;
       
        //将data显示在聊天记录区
        if (count % 2 == 0) {
          console.log(data === '如何投诉商家' );
          if( data === '如何投诉商家' || data === '提供建议'){
              this.button = true
          }
          //客服端
          list.innerHTML += `
               <div class="chart-item" style="display: flex;">
                  <img src="/96.jpg" alt="" style="width: 50px;height:13vw;margin-left: 10px;">
                  <div style=" position: relative; margin:10px 0 10px 0">
                    <span class="dialog " style=" 
                    border: 1px solid gainsboro;
                    background-color: gainsboro;
                    box-shadow: 1px 0 outset;
                    margin-top: 10px;
                    margin-left: 10px;
                    padding: 2px 5px 2px 5px;
                    text-align: center;  
                    line-height: 2;
                    color: black;
                    font-size: 18px;
                    border-radius: 4px;">${data}</span>
                  </div>                 
                </div>
              `;
        } else {
          //服务器
          list.innerHTML += ` 
                 <div class="chart-item" style="
                  display: flex;
                  flex-direction: row-reverse;
                  margin: 20px 5px 0 0 ;">
                  <img src="/88.jpg"  style="width: 50px;height: 15vw">
                  <div style=" position: relative; margin:10px 5px 10px 5px;  background-color: gainsboro;">
                    <span class="dialog " style=" 
                    border: 1px solid gainsboro;                   
                    box-shadow: 1px 0 outset;
                     margin-top: 10px;
                     padding: 2px 5px 2px 5px;
                     text-align: center;  
                     line-height: 2;
                     color: black;
                     font-size: 18px;
                     border-radius: 4px;
                    ">${data}</span>
                  </div>                  
                </div>`;
        }

        // 使用list元素的滚动条持续保持在最底部
        list.scrollTop = list.scrollHeight;
      });
      //点击发表按钮,发送消息
      send.onclick = function () {
        // let info = {info: '聊天内容，触发后push一个'},
        // this.chat.push(info)
        // 核心代码
        // 滚动
        // this.$nextTick(() => {
        //   let msg = document.getElementById('chart-list') // 获取对象
        //   msg.scrollTop = msg.scrollHeight // 滚动高度
        // })
        //文本框中的值
        let val = message.value;
        //发消息
        //trim()去除字符串两端的空白
        if (val.trim() == "") {
          return;
        }
        //不能超过100字符
        if (val.length > 100) {
          return;
        }
        socket.emit("textmsg", val);
        //清除文本框
        message.value = "";
        message.focus();
      };
    },
  },
  updated() {
    this.getservice();
  },
};
</script>

<style  lang="scss" scoped>
/* 标题客服 */
h1 {
  text-align: center;
  line-height: 6vh;
  color: rgb(68, 67, 67);
  background-color: rgb(255, 255, 255);
  height: 6vh;
}
//内容框
.centert {
  background-color: rgba(243, 241, 241, 0.74);
  width: 100%;
  // height: 135vw;
}
//聊天
.chart-form {
  position: fixed;
  bottom: 0;
  //聊天输入框
  .chart-form-message {
    border: 1px solid rgb(110, 108, 108);
    border-radius: 15px;
    color: rgb(110, 108, 108);
    margin: 5px 10px;
    width: 75vw;
    // height: 30px;
    padding-top: 8px;
  }
  // 按钮
  .chart-form-send {
    background-color: rgb(19, 19, 20);
    border-color: aliceblue;
    width: 17vw;
    height: 6vh;
    font-size: 5vw;
    border-radius: 15vw;
    position: absolute;
    top: -45.5px;
    left: 306px;
  }
}

 .chart-item{
  display: flex;
  flex-direction: row-reverse;
  margin: 50px 15px 0 0 ;
}
.dialog {
    border: 1px solid gainsboro;
    background-color: gainsboro;
    box-shadow: 1px 0 outset;
    margin-top: 10px;
    margin-right: 16px;
    padding: 2px 5px 12px 5px;
    text-align: center;
    // line-height: 2;
    color: black;
    font-size: 18px;
    border-radius: 4px;
  }

//   .jt{
//     width: 0;
//     height: 0;
//     border: 10px solid;
//     border-color: transparent  transparent transparent  gainsboro;
//     position: absolute;
//     left: 48px;
//     top: 8px;

//   }
</style>


